<template>
    <div>
        <nut-navbar :rightShow="false">
            限时抢购
            <a slot="back-icon" @click="back">＜返回首页</a>
        </nut-navbar>
        <div class="header">
            <button @click="click1(1)" :class="btn==1?'btn':'btn1'">进行中</button>
            <button @click="click1(0)" :class="btn==0?'btn':'btn1'">未开始</button>
        </div>
        <ul class="list1" >
            <li class="list-item" v-for="(item, index) in datalist1" :key="index" @click="toDetail(item.goods.id)">
                <img :src="item.goods.goodsimage"/>
                <div>
                    <p>{{item.goods.goodstitle}}</p>
                    <p>活动价：
                        <nut-price
                                :price="item.activity.obj1"
                                :needSymbol="true"
                                :thousands="false"/>
                    </p>
                    <p>截止时间：<span>{{item.activity.endtime}}</span></p>
                    <p>
                        <span>商品编号：{{item.goods.id}}</span><br/>
                        <span></span><br/>
                    </p>
                </div>
            </li>
        </ul>
        <ul class="list0" >
            <li class="list-item" v-for="(item, index) in datalist0" :key="index" @click="toDetail(item.goods.id)">
                <img :src="item.goods.goodsimage"/>
                <div>
                    <p>{{item.goods.goodstitle}}</p>
                    <p>活动价：
                        <nut-price
                                :price="item.activity.obj1"
                                :needSymbol="true"
                                :thousands="false"/>
                    </p>
                    <p>开始时间：<span>{{item.activity.starttime}}</span></p>
                    <p>
                        <span>商品编号：{{item.goods.id}}</span><br/>
                        <span></span><br/>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Active",
        data() {
            return {
                page: 0,
                num: 6,
                datalist1:[],
                datalist0:[],
                btn:1
            };
        },
        methods: {
            back() {
                this.$router.push({name: 'index'})
            },
            click1(a){
                if(a==1){
                    this.btn=1;
                    var param1 = new URLSearchParams();
                    param1.append("state",1)
                    this.$axios.get('/activity/selectByState',{params:param1}).then(
                        res => {
                            if(res.data.code == 200){
                                this.datalist1 = res.data.data;

                                this.datalist0=[];
                            }
                        }
                    )

                }else {
                    this.btn=0;
                    var param0 = new URLSearchParams();
                    param0.append("state",0)
                    this.$axios.get('/activity/selectByState',{params:param0}).then(
                        res => {
                            if(res.data.code == 200){
                                this.datalist0 = res.data.data;

                                this.datalist1=[];
                            }
                        }
                    )
                }
            },
            toDetail(id){

                this.$router.push({name:'goodsinfo',query:{'goodsId':id}});
            }
        },
        mounted() {
            this.click1(1);
        },
    }
</script>

<style scoped>
    .header{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        margin:5px auto;
        padding:0px;
    }
    .btn{
        width:50%;
        border:none;
        background: #c82519;
        color: #ffffff;
        line-height: 2em;
        outline: none;
    }
    .btn1{
        width:50%;
        border:none;
        background: #ffffff;
        color: #6a6a6a;
        line-height: 2em;
        outline: none;
    }
    .list1{
        width:100vw;
        list-style: none;
        font-size: 14px;
    }
    .list0{
        width:100vw;
        list-style: none;
        font-size: 14px;
    }
    .list-item{
        width:96%;
        background: #ffffff;
        margin:5px auto;
        padding: 0px 2%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: left;
    }
    .list-item>img{
        width:150px;
        height: 150px;
        margin-right: 5px;
    }
    .list-item>div{
        width:56%;
        height: 150px;
    }
    .list-item>div>p:nth-of-type(1){
        width:100%;
        display: block; /* 需要 */
        white-space: nowrap; /* 过长部分不换行 */
        text-overflow: ellipsis;  /* 过长部分展示省略号 */
        overflow: hidden; /* 隐藏过长部分 */
        font-size: 12px;
    }
    .list-item>div>p:nth-of-type(2)>div{
        color:#c82519;
    }
</style>
